<template>
  <div>
    <el-container>
      <el-header style="height: 100px;"><img src="" alt="" style="height: 100px"></el-header>
      <el-main v-bind:style="{height:mainHeight+'px'}">
        <el-form ref="form" class="form">
          <el-form-item label="账号 :">
            <el-input v-model="account" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码 :">
            <el-input v-model="password" type="password" placeholder="请输入密码" @keyup.enter.native="login"></el-input>
            <el-button type="primary" @click='login' class="login-btn">登录</el-button>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>Copyright ©2018 <a href="http://www.zhen-yee.com">蓁奕互联网科技</a> All Rights Reserved</el-footer>
    </el-container>
  </div>
</template>
<script>
import { validateData } from '../ttJs/utils.js'
import utils from '../ttJs/utils.js'
var CryptoJS = require('crypto-js');
var AES = require("crypto-js/aes");
export default {
  name: "Login",
  data() {
    return {
      account: null,
      password: null,
      mainHeight: ''
    }
  },
  mounted: function() {
    this.getMainHeight()
  },
  methods: {
    login() {
      var self = this;
      var encode = encodeURI(self.aesCBC(self.password))
      var url = '/admin/auth/login';
      var params = { account: self.account, password: encode };
      var success = function(response) {
        var status = response.status
        if (status == 200) {
          self.$notify({
            title: '提示',
            message: '已登录'
          });
          self.$store.state.user = response.info
          sessionStorage.setItem('account', response.info);
          self.$router.push({ name: 'ProductList' })
        } else {
          utils.fail('登录失败')
        }
      }
      var fail = function(res) {
        var msg = ''
        if (validateData(res)) {
          msg = res.msg
        } else {
          msg = '登录失败'
        }
        utils.fail(msg)
      }
      var complete = function(res) {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    aesCBC(text) {
      var self = this;
      var aesText = text;
      var key = CryptoJS.enc.Utf8.parse(self.$store.state.aesKey);
      var iv = CryptoJS.enc.Utf8.parse(self.$store.state.aesIv);
      aesText = CryptoJS.AES.encrypt(text, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      }).toString();
      return aesText;
    },
    getMainHeight() {
      this.mainHeight = document.documentElement.clientHeight - 160
    }
  }
}

</script>
<style scoped>
.el-header {
  background: #fff;
  color: #333;
  text-align: center;
  line-height: 100px;
}

.el-footer {
  background: #fff;
  color: #333;
  text-align: center;
  line-height: 60px;
  height: 60px;
}

.el-header {
  font-size: 22px;
}

.form {
  display: inline-block;
  margin: 0 auto;
  width: 380px;
  background: #fff;
  padding: 10px 40px;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-main {
  position: relative;
  background: url("http://res.zhen-yee.com/zhenyi/login-bg.jpg");
  background-size: cover;
  color: #333;
  text-align: center;
}

.login-btn {
  cursor: pointer;
  width: 100%;
  margin-top: 22px;
  background: #CCE5E2;
  border-color: #CCE5E2;
  border-radius: 15px;
  color: #7C9A9F;
}

</style>
